<extend name="common:commonShowTemplate"/>
<block name="main_content">
    <div id="content">
        <div id="content-header">
            <div id="breadcrumb">
                <a class="tip-bottom" href="index.html" data-original-title="Go to Home">
                	<i class="icon-home"></i>首页
                 </a> 
                 <a href="#">会议管理</a>
                 <a href="/vote/voteList">投票查询</a>
                 <a class="current" href="#">投票结果</a>
            </div>
        </div>
        <!--Action boxes-->
         <div class="container-fluid">
            <!--End-Action boxes-->
            <!--Chart-box-->
            <div class="row-fluid">
                <div class="widget-box">
                    <div class="widget-title bg_lg">
                        <span class="icon"><i class="icon-signal"></i></span>
                        <h5>投票结果统计</h5>
                    </div>
                    <div class="widget-content">
                        <div class="row-fluid">

                            <div id="line" style="width:100%;height:600px;float: left;"></div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</block>

<block name="js_content">
    <script src="/Public/assets/js/echarts.min.js" charset="utf-8"></script>
    <script>
	    // 基于准备好的dom，初始化echarts实例
	    var myChart = echarts.init(document.getElementById('line'));
	    var size = 0;
	    function myChartOption(myChart,keys,values,series_array,text_length){
	    	//上一次记录数值 比此次传入数值大的情况 需要重新刷新坐标轴
	    	if(size > keys.length){
        		myChart.clear();
        	}
	    	size = keys.length;
	    	var rate = parseInt(text_length / 2.25);
	    	var grid_bottom = (rate > 30)?(rate+10) : 30;
	    	series_array.push({
	            name:'饼状图',
	            type:'pie',
	            radius : [30, 110],
	            center : ['75%', '50%'],
	            roseType : 'radius',
	            data:values,
	            label: {
                    normal:{
                    	 show: true,
                         position: 'right',
                         formatter: function(params){
                             return params.name + ": " + params.value + "票";
                          }
                    }
	            }
	        });
	        var option = {
        	    title : {
        	        text: '{$vote.vote_name}',
        	        subtext: '{$vote.remark1}',
        	        x:'center'
        	    },
        	    tooltip : {
        	        trigger: 'item',
        	        formatter: function(params){
        	        	if(params.seriesType == "bar"){
        	        		return params.seriesName+":&nbsp;"+params.value;
        	        	}else{
	        	        	return params.name+":&nbsp;"+params.value+"&nbsp;("+params.percent+"%)";
        	        	}
        	        }
        	    },
        	    legend: {
        	        x : 'center',
        	        y : 'bottom',
        	        width:'100%',
        	        data:keys
        	    }, 
        	    grid: [{
        	        top: 60,
        	        width: '40%',
        	        left:10,
        	        bottom: grid_bottom,
        	        containLabel: true
        	    }],
        	    toolbox: {
        	        show : true,
        	        feature : {
        	            dataView : {show: true, readOnly: false},
        	            magicType : {
        	                show: true,
        	                type: ['pie', 'funnel']
        	            },
        	            saveAsImage : {show: true}
        	        }
        	    },
        	    calculable : true,
        	    xAxis: [{
        	        type: 'value',
        	        splitLine: {
        	            show: false
        	        }
        	    }],
        	    yAxis: [{
        	        type: 'category',
        	        data: [],
        	        axisLabel: {
        	            interval: 0,
        	            rotate: 0
        	        },
        	        splitLine: {
        	            show: false
        	        }
        	    }],
        	    series : series_array
        	};
	         myChart.setOption(option);
	    };
        function refreshCharts(){
        	var param = {};
        	param.vote_id = "{$vote.vote_id}";
            $.ajax({
                type: 'post',
                url: '/AjaxService/center/vote/queryitemsbyvoteid',
                data: param,
                dataType: 'json',
                async: true,
                success: function (data) {
                	var keys = new Array();
              	    var values = new Array();
              	    var series_array = new Array();
              	    var text_length = 0;
                	$.each( data.Result, function(i, item_en){
                		//var key = item_en.item_name+"["+item_en.item_count+"]";
                	   var key = item_en.item_name;
               		   keys.push(key);
               		   values.push({value:item_en.item_count, name:key});
               		   series_array.push({
                           name: key,
                           type: 'bar',
                           stack: key,
               	           z: 3,
               	           label: {
	               	           normal: {
	               	               position: 'right',
	               	               show: true
	               	           }
	               	       },
                           data: [item_en.item_count]
                       });
               		   text_length += parseInt(key.length);
               		});
              	    myChartOption(myChart,keys,values,series_array,text_length);
                },
                error: function (e, err_name, err_text) {
    			    myChartOption(myChart,['无数据'],[{value:0, name:'无数据'}],new Array(),0);
                }
            });
        };
	    //myChartOption(myChart,['无数据'],[{value:0, name:'无数据'}]);
	    //refreshCharts();
	    refreshCharts();
        setInterval(refreshCharts,2000);
    </script>

</block>